<template>
  <view class="upgrade-modal" :class="getShow === true ? 'show' : ''">
    <view class="upgrade-dialog" style="background-color: transparent">
      <view class="padding-top upgrade-style" :class="'upgrade-topbg-' + getTheme">
        <view>
          <text class="upgrade-title" style="color: white">{{
            getTitle || t('component.upgrade.title')
          }}</text>
        </view>
        <text class="flex-wrap" style="color: white">{{ getVersion || '' }}</text>
      </view>
      <view class="padding-xl upgrade-style text-left">
        <scroll-view style="max-height: 200rpx" scroll-y>
          <view style="font-size: 15px">{{ getUpgrade?.title || '' }}</view>
          <text style="margin-top: 10rpx; font-size: 11px">{{ getUpgrade?.content || '' }}</text>
        </scroll-view>
        <view class="upgrade-progress radius striped active" v-if="getShowProgress">
          <view
            class="upgrade-progress-inner"
            :class="'bg-' + getTheme"
            :style="'width: ' + getProgress.progress + '%;'"
          >
            {{ getProgress.progress ? `${getProgress.progress}%` : '' }}
          </view>
        </view>
      </view>
      <view class="upgrade-bar upgrade-style justify-end">
        <view class="action">
          <wd-button
            :round="false"
            type="primary"
            class="upgrade-btn"
            :class="'bg-' + getTheme"
            v-if="getUpgrade.url && getShowProgress === false"
            @click="() => upgrader.upgrade()"
          >
            {{
              getUpgrade.need
                ? t('component.upgrade.confirmUpgrade')
                : t('component.upgrade.reinstall')
            }}
          </wd-button>
          <wd-button
            :round="false"
            type="info"
            class="upgrade-btn margin-left"
            :class="'line-' + getTheme"
            v-if="getShowProgress === false"
            @click="() => upgrader.close()"
            >{{ t('common.close') }}
          </wd-button>
        </view>
        <view
          class="action text-center"
          v-if="getShowProgress === true && getUpgrade.force !== true"
        >
          <wd-button
            :round="false"
            type="info"
            class="upgrade-btn"
            :class="'bg-' + getTheme"
            @click="() => upgrader.abort()"
          >
            {{ t('common.cancel') }}
          </wd-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { useI18n } from '@/locale/index';
  import { useSkinStore } from '@/store/modules/skin';

  import { useUpgraderInternal } from '../../data';
  import { upgradeProps } from '../../types';

  const props = defineProps(upgradeProps);

  const { t } = useI18n();
  const skinStore = useSkinStore();

  const upgrader = useUpgraderInternal(props.selector);
  const { getShow, getTitle, getVersion, getUpgrade, getShowProgress, getProgress } = upgrader;

  /** 获取主题 */
  type themeType = 'blue' | 'red' | 'green';
  const getTheme = computed<themeType>(() => {
    let theme: themeType = 'blue';
    switch (skinStore.getCurrentThemeColor?.value) {
      case 'blue':
        theme = 'blue';
        break;
      case 'red':
        theme = 'red';
        break;
      case 'green':
        theme = 'green';
        break;
    }
    return theme;
  });
</script>

<style lang="scss" scoped>
  @import './index';

  .upgrade-topbg-blue {
    height: 260rpx;
    background-image: url('./images/bg_blue.png');
    background-repeat: no-repeat;
    background-position: center;
    //background-size: 100% 100%;
    background-size: cover;
    border-radius: 10rpx 10rpx 0 0; /* 设置顶部圆角 */
  }

  .upgrade-topbg-red {
    height: 260rpx;
    background-image: url('./images/bg_red.png');
    background-repeat: no-repeat;
    background-position: center;
    //background-size: 100% 100%;
    background-size: cover;
    border-radius: 10rpx 10rpx 0 0; /* 设置顶部圆角 */
  }

  .upgrade-topbg-green {
    height: 260rpx;
    background-image: url('./images/bg_green.png');
    background-repeat: no-repeat;
    background-position: center;
    //background-size: 100% 100%;
    background-size: cover;
    border-radius: 10rpx 10rpx 0 0; /* 设置顶部圆角 */
  }

  .wot-theme-dark {
    .upgrade-topbg-blue {
      background-image: url('./images/bg_blue_dark.png');
    }
    // .upgrade-topbg-blue::after {
    //   position: absolute;
    //   top: 0;
    //   right: 0;
    //   bottom: 0;
    //   left: 0;
    //   content: '';
    //   background: rgba(0, 0, 0, 0.3); /* 黑色蒙层，30%不透明度 */
    // }

    .upgrade-topbg-red {
      background-image: url('./images/bg_red_dark.png');
    }

    .upgrade-topbg-green {
      background-image: url('./images/bg_green_dark.png');
    }
  }

  .upgrade-title {
    font-size: 40rpx;
    color: white;
  }
</style>
